<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-05 11:37:20
 * @LastEditors: cml 2048969935@qq.com
 * @LastEditTime: 2023-03-05 14:33:03
 * @FilePath: \web221102\后台\cml-gonggao.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../bootstrap-4.6.1-dist/js/jquery.min.js"></script>
    <script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #image-preview {
	border: 1px solid #ccc;
	width: 100%;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
</style>

<body>
    <div>
         <div class="row">
                  <div class="col-md-6 row" style="height:100px;">
                      <div class=" m-4">
                        *公告标题
                      </div>
                      <div class=" m-4">
                        <input type="text"  class="rounded-pill" placeholder="公告标题">
                      </div>
                </div>
                  <div class=" col-md-6 row float-right" style="height:100px;" >
                    <div class=" m-4">
                        *类型
                      </div>
                      <div class=" m-4">
                        <input type="text"  class="rounded-pill" placeholder="类型">
                      </div>
                  </div>
          </div>
      </div>

<form method="post" enctype="multipart/form-data" id="file_upload">
	<p>图片预览：</p>
	<img id="image-preview">
	<p>
	<input type="file" id="file" name="upload_image" accept="image/gif, image/jpeg, image/png, image/jpg">
	
	</p>
    <p id="info"></p>
</form>
 <div>
       发布日期<input type="text" class="rounded-pill">
 </div>
 <div>
        <div>内容</div>
       <textarea name="" id="" cols="30" rows="10" style="width: 80%;"></textarea>
      <div>
        <button class="bg-primary m-3 p-2 rounded-pill ">
            <span class="gglyphicon glyphicon-plus m-2"></span>
            新建
        </button>
        <button class="bg-danger m-3 p-2 rounded-pill ">
            <span class="glyphicon glyphicon-trash m-2"></span>
            删除
        </button>
      </div>
 </div>       
</body>
<script>
   	let fileInput = document.getElementById('file');
			let info = document.getElementById('info');
			let preview = document.getElementById('image-preview');
			// 监听change事件:
			fileInput.addEventListener('change', function() {
				// 清除背景图片:
				preview.style.backgroundImage = '';
				if (!fileInput.value) {
					info.innerHTML = '没有选择文件';
					return;
				}
				let file = fileInput.files[0];
				let size = file.size;
				if (size >= 1 * 1024 * 1024) {
					alert('文件大小超出限制');
					info.innerHTML = '文件大小超出限制';
					return false;
				}
				// 获取File信息:
			
				// 读取文件:
				let reader = new FileReader();
				reader.onload = function(e) {
					let data = e.target.result;
					console.log(preview, 'a标签')
					preview.src = data
				};
				// 以DataURL的形式读取文件:
				reader.readAsDataURL(file);
 
			});
 
			function save() {
 
				var url = preview.src; // 获取图片地址
				var a = document.createElement('a'); // 创建一个a节点插入的document
				var event = new MouseEvent('click') // 模拟鼠标click点击事件
				a.download = 'beautifulGirl' // 设置a节点的download属性值
				a.href = url; // 将图片的src赋值给a节点的href
				a.dispatchEvent(event)
			}

</script>

</html>